<template>
  <div>
    <div style="margin-top: 20px">
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        border
        style="width: 100%"
      >
        <el-table-column type="selection" width=""> </el-table-column>

        <el-table-column prop="" label="商品" width="360px">
          <!-- <img class="qwe" :src="scope.row.cover" alt="" /> -->
          <template v-slot="scope">
            <div class="d-flex">
              <div style="flex: 1 1 0%">
                <p class="mb-1">订单编号：</p>
                <p class="mb-1">
                  <small>{{ scope.row.no }}</small>
                </p>
              </div>
              <div style="flex: 1 1 0%">
                <p class="mb-1">下单时间：</p>
                <p class="mb-1">
                  <small>{{ scope.row.create_time }}</small>
                </p>
              </div>
            </div>
            <div>
              <!-- <img :src="scope.row.order_items[0].goods_item.cover" alt=""> -->
              <!-- <p>{{scope.row.order_items[0].goods_item.title}} </p> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column width="120px" prop="" label="实付款">
           <template v-slot='scope'>
            <div>
                 <p>￥{{scope.row.total_price}}</p>
                 <p style="font-size:12px;">(含运费:￥0.00)</p>
            </div>
           </template>
        </el-table-column>
        <el-table-column width="120px" prop="" label="买家">
          <template v-slot='scope'>
            <div>
                 <p>{{scope.row.user.username}}</p>
                 <p style="font-size:12px;">(用户id:{{scope.row.user_id}})</p>
            </div>
           </template>
         </el-table-column>
        <el-table-column prop="" label="支付方式" width="170">
            <template v-slot='scope'>
            <div>
                 <p 
                 :class="scope.row.payment_method=='wechat'?'weixin':scope.row.payment_method=='alipay'?'zhifu':'weizhifu'"
                 >{{scope.row.payment_method=='wechat'?'微信支付':scope.row.payment_method=='alipay'?'支付宝支付':'未支付'}}</p>
            </div>
           </template>
        </el-table-column>
        <el-table-column prop="" label="配送方式" width="170">
                <template v-slot='scope' >
            <div  v-if='scope.row.ship_data'>
                 <div>{{scope.row.ship_data.express_company}}</div>
                 <div>{{scope.row.ship_data.express_no}}</div>
            </div>
            <div v-else>
                 <div>未配送</div>              
            </div>
           </template>
        </el-table-column>
        <el-table-column prop="min_oprice" label="交易状态" width="170">
            <template v-slot='scope'>
            <div>
                <p >付款状态: <span  :class="scope.row.payment_method?'weixin':'weizhifu'"> {{scope.row.payment_method?'已支付':'未付款'}}</span> </p>
                <p >发货状态: <span  :class="scope.row.ship_data?'weixin':'weizhifu'" > {{scope.row.ship_data?'已发货':'未发货'}}</span> </p>
                <p >收获状态: <span  :class="scope.row.ship_status=='received'?'weixin':'weizhifu'"> {{scope.row.ship_status=='received'?'已收货':'未收获'}}</span> </p>

            </div>
           </template>
        </el-table-column
        ><el-table-column prop="amount3" label="操作" width="120">
          <div>订单详情</div>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  props: ["tableData"],
  data() {
    return {};
  },
  methods: {},
};
</script>
<style>
.d-flex {
  display: flex;
}
.weixin{
   color: #fff;
    background-color: #28a745;
}
.zhifu{
    color: #fff;
    background-color: #007bff;
}
.weizhifu{
     color: #fff;
    background-color: #000000;
}
</style>
